<template>
  <el-container class="power-container">
    <el-header height="207px">
      <el-row>
        <el-col :lg="2" :md="2" :sm="24" :xl="2" :xs="24">
          <div style="color: transparent">占位符</div>
        </el-col>
        <el-col :lg="20" :md="20" :sm="24" :xl="20" :xs="24">
          <div class="power-top-tit1">HELLO!</div>
          <div class="power-top-tit2">欢迎来到大薇云平台用户后台！</div>
          <div class="power-top-line"></div>
        </el-col>
        <el-col :lg="2" :md="2" :sm="24" :xl="2" :xs="24">
          <div style="color: transparent">占位符</div>
        </el-col>
      </el-row>
    </el-header>
    <el-main height="500px">
      <el-row>
        <el-col :lg="2" :md="2" :sm="24" :xl="2" :xs="24">
          <div style="color: transparent">占位符</div>
        </el-col>
        <el-col :lg="20" :md="20" :sm="24" :xl="20" :xs="24">
          <el-carousel type="card" height="470px" arrow="always" :autoplay="autoplay" :interval="90000">
            <el-carousel-item v-for="(item,index) in list" :key="index">
              <div class="power_card" @click="handleLogin(item.key)"
                   :style="{background:item.key==='hd_gld'? bg_gl : item.key==='hd_cwd' ? bg_cw : item.key==='hd_zxd' ? bg_zx:item.key==='dc_gld'? bg_gl : item.key==='dc_cwd' ? bg_cw : item.key==='dc_cwd' ? bg_zx : item.key==='hdmk' ? bg_hdmk : item.key==='jfsc' ? bg_jfsc : bg_xm}">
                <el-image
                  style="width: 110px; height: 110px;margin: 25% auto;"
                  :src="item.key==='hd_gld'? icon_gl : item.key==='hd_cwd' ? icon_cw : item.key==='hd_zxd' ? icon_zx:item.key==='dc_gld'? icon_gl : item.key==='dc_cwd' ? icon_cw : item.key==='dc_cwd' ? icon_zx:item.key==='hdmk' ? icon_hdmk : item.key==='jfsc' ? icon_jfsc : icon_xm"
                  fit="fit"></el-image>
                <div class="power_name">{{ item.name }}</div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </el-col>
        <el-col :lg="2" :md="2" :sm="24" :xl="2" :xs="24">
          <div style="color: transparent">占位符</div>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import {mapActions, mapGetters} from 'vuex'
import {translateTitle} from '@/utils/i18n'
import {upusertemproles} from '@/api/index'
import {getPower} from '@/api/index'

export default {
  name: 'power',
  directives: {
    focus: {
      inserted(el) {
        el.querySelector('input').focus()
      },
    },
  },
  beforeRouteLeave(to, from, next) {
    clearInterval(this.timer)
    next()
  },
  data() {
    return {
      nodeEnv: process.env.NODE_ENV,
      autoplay: false,
      icon_gl: require('@/assets/login_images/icon-gl.png'),
      bg_gl: 'linear-gradient(-37deg, #21D088 0%, #49ECA9 100%)!important',
      icon_zx: require('@/assets/login_images/icon-tg.png'),
      bg_zx: 'linear-gradient(-37deg, #FFAA26 0%, #FFC874 100%)!important',
      icon_cw: require('@/assets/login_images/icon-cw2.png'),
      bg_cw: 'linear-gradient(-37deg, #3E93FD 0%, #76B3FF 100%)!important',
      icon_xm: require('@/assets/login_images/icon-cw.png'),
      bg_xm: 'linear-gradient(-37deg, #9280EE 0%, #CA8AEA 100%)!important',
      icon_hdmk: require('@/assets/login_images/icon-hdmk.png'),
      bg_hdmk: 'linear-gradient(-37deg, #a91bb3 0%, #f676ff 100%)!important',
      icon_jfsc: require('@/assets/login_images/icon-jfsc.png'),
      bg_jfsc: 'linear-gradient(-37deg, #ea5305 0%, #ffb189 100%)!important',
      list: [
        {
          stype: '1',
          state: '2'
        },
        {
          stype: '1',
          state: '2'
        }
      ],
      form: {
        type: '',
        mobile: '',
        password: '',
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined,
      timer: 0,
    }
  },
  computed: {
    ...mapGetters({
      title: 'settings/title',
    }),
  },
  watch: {
    $route: {
      handler(route) {
        this.redirect = (route.query && route.query.redirect) || '/'
      },
      immediate: true,
    },
  },
  created() {
    getPower().then(res => {
      let list = [];
      console.log(12345, res.hd_gld)
      if (res && res.length > 0) {
        res.forEach(item => {
          let ite = {
            name: '',
            key: ''
          }
          ite.name = item.name;
          ite.key = item.key;
          list.push(ite)
        })
      }
     /* let item1 = {
        name: '互动模块',
        key: 'hdmk'
      }
      let item2 = {
        name: '积分商城',
        key: 'jfsc'
      }
      list.push(item1, item2)*/

      this.list = list
      console.log(1233, this.list)
    })
  },
  methods: {
    ...mapActions({
      login: 'user/login',
    }),
    handleRoute() {
      return this.redirect === '/404' || this.redirect === '/403'
        ? '/'
        : this.redirect
    },
    handleLogin(key) {
      console.log(44, key)
      if (key === 'hdmk') {
        //跳转互动模块页面
        let route1 = "/interact";
        this.$router.push(route1)
      } else if (key === 'jfsc') {
        //跳转积分商城页面
        let route2 = "/shop";
        this.$router.push(route2)
      } else {
        upusertemproles({type: key}).then(res => {
          sessionStorage.setItem('reset_temp_001', 1);
          console.log(12, res)
          try {
            this.loading = true
            console.log(this.handleRoute())
            this.$router.push(this.handleRoute())
          } finally {
            this.loading = false
          }
        })
      }
    },
  },
}
</script>

<style lang="scss">
.power_card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  width: 380px;
  height: 456px;
  background: #fff;
  box-shadow: 0px 8px 21px 0px rgba(0, 0, 0, 0.3);
  border-radius: 20px;

  .power_name {
    flex: 1;
    font-size: 32px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    text-align: center;
  }
}

.power-container {
  height: 100vh;
  background: url('~@/assets/login_images/power_bg.jpg') center center fixed no-repeat;
  background-size: cover;

  .power-top-tit1 {
    margin-top: 40px;
    font-size: 60px;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #FFFFFF;
    line-height: 80px;

  }

  .power-top-tit2 {
    font-size: 40px;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #FFFFFF;
    line-height: 60px;
    margin-bottom: 20px;
  }

  .power-top-line {
    width: 84px;
    height: 7px;
    background: #fff;
  }
}

.el-carousel__mask {
  opacity: 0 !important;
  background-color: rgba(0, 0, 0, 0) !important;
}

.el-carousel__arrow {
  width: 60px !important;
  height: 60px !important;
  border-radius: 30px !important;
  background-color: rgba(255, 255, 255, 0.11);
  font-size: 40px !important;
}

.el-carousel__arrow:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

.el-carousel__item:nth-child(2n) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  background-color: rgba(0, 0, 0, 0);

  .el-carousel__mask {
    opacity: 0 !important;
    background-color: rgba(0, 0, 0, 0) !important;
  }
}

.el-carousel__item:nth-child(2n+1) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  background-color: rgba(0, 0, 0, 0);

  .el-carousel__mask {
    opacity: 0 !important;
    background-color: rgba(0, 0, 0, 0) !important;
  }
}
</style>
